<template>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <button @click="changeName">修改名字</button>
  <button @click="changeAge">修改年龄</button>
  <button @click="changePerson">修改整个人</button>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
let person = ref({
  name: "张三",
  age: 18,
});
function changeName() {
  person.value.name += "-";
}
function changeAge() {
  person.value.age += 1;
}
function changePerson() {
  person.value = { name: "李四", age: 99 };
}
watch(
  person,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },
  { deep: true, immediate: true } //deep是一变就监视  immediate是刚开始先监视一次
  //修改一个值的话  新和旧  是同一个东西   修改整个对象才是新旧分开
);
</script>
